/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
@mixin toiLineHovEffects() {
    &:before,
    &:after {
        background-color: $timeControllerToiLineColorHov;
    }
}

.l-time-conductor-holder {
    border-top: 1px solid $colorInteriorBorder;
    min-width: 500px;
    padding-top: $interiorMargin;
}

.time-conductor-icon {
    $c: $colorObjHdrIc;
    $d: 18px;
    height: $d !important;
    width: $d;
    position: relative;

    &:before {
        @extend .ui-symbol;
        color: $c;
        content: $glyph-icon-brackets;
        font-size: $d;
        line-height: normal;
        display: block;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    // Clock hands
    div[class*="hand"] {
        $handW: 2px;
        $handH: $d * 0.4;
        @include transform(translate(-50%, -50%));
        @include animation-iteration-count(infinite);
        @include animation-timing-function(linear);
        position: absolute;
        height: $handW;
        width: $handW;
        left: 50%;
        top: 50%;
        z-index: 2;
        &:before {
            background: $colorObjHdrIc;
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            bottom: -1px;
        }
        &.hand-little {
            z-index: 2;
            @include animation-duration(12s);
            &:before {
                height: ceil($handH * 0.7);
            }
        }
        &.hand-big {
            z-index: 1;
            @include animation-duration(1s);
            &:before {
                height: $handH;
            }
        }
    }
}

.l-time-conductor {
    $knobHOffset: 0px;
    $rangeValPad: $interiorMargin;
    $rangeValOffset: $sliderKnobW + $interiorMargin;
    $r1H: nth($ueTimeConductorH, 1);
    $r2H: nth($ueTimeConductorH, 2);
    $r3H: nth($ueTimeConductorH, 3);
    position: relative;

    > .l-row-elem {
        // First order row elements
        box-sizing: border-box;
        width: 100%;
        position: relative;
    }

    .mode-selector .s-menu-button,
    .time-delta {
        &:before {
            @extend .ui-symbol;
        }
    }

    .time-delta {
        &:before {
            color: $colorTimeCondKeyBg;
        }
    }

    .l-time-conductor-inputs-holder,
    .l-time-conductor-inputs-and-ticks,
    .l-time-conductor-zoom-w {
        font-size: 0.8rem;
    }

    .l-time-conductor-inputs-holder {
        $iconCalendarW: 16px;
        $wBgColor: $colorBodyBg;

        height: $r1H;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        pointer-events: none;
        .l-time-range-w {
            // Wraps a datetime text input field
            height: 100%;
            position: absolute;
            .title {
                display: inline-block;
                margin-right: $interiorMarginSm;
            }
            &.start-w {
                @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
                padding-right: $ticksBlockerFadeW;
                .title:before {
                    content: 'Start';
                }
            }
            &.end-w {
                @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
                padding-left: $ticksBlockerFadeW;
                right: 0;
                .title:before {
                    content: 'End';
                }
            }
            .l-time-conductor-inputs {
                pointer-events: auto;
            }
            input[type="text"] {
                @include trans-prop-nice(padding, 250ms);
            }
            .time-range-input input[type="text"] {
                width: $timeCondInputTimeSysDefW;
            }
            .hrs-min-input input[type="text"] {
                width: $timeCondInputDeltaDefW;
            }
            .icon-calendar {
                margin-top: 4px;
            }
        }
    }

    .l-time-conductor-inputs-and-ticks {
        $c: $colorTimeCondTicks;
        height: $r1H;
        mct-conductor-axis {
            display: block;
            position: relative;
            width: 100%;
        }
        .l-axis-holder {
            height: $r1H;
            position: absolute;
            left: nth($timeCondAxisLROffset, 1);
            right: nth($timeCondAxisLROffset, 2);
            svg {
                text-rendering: geometricPrecision;
                width: 100%;
                height: 100%;
                > g {
                    font-size: 0.9em;
                }
                path {
                    // Line beneath ticks
                    display: none;
                }
                line {
                    // Tick marks
                    stroke: $c;
                }
                text {
                    // Tick labels
                    fill: $c;
                }
            }
        }
    }
    .l-data-visualization-holder {
        height: $r2H;
        z-index: 2; // Must lift above ticks and inputs

        .l-page-button,
        .l-data-visualization {
            position: absolute;
            top: 0;
            bottom: 0;
        }

        .l-page-button {
            @if nth($timeCondAxisLROffset, 1) + nth($timeCondAxisLROffset, 2) > 30 {
                left: 0;
                width: nth($timeCondAxisLROffset, 1);
                &.align-right {
                    left: auto;
                    right: 0;
                    width: nth($timeCondAxisLROffset, 2);
                }
            } @else {
                // Hide these if the offsets aren't enough
                display: none;
            }
        }

        .l-data-visualization {
            background: $colorTimeCondDataVisBg;
            left: nth($timeCondAxisLROffset, 1);
            right: nth($timeCondAxisLROffset, 2);
            &:hover {
                .l-toi-holder.hover {
                    opacity: 1;
                }
                .l-toi-holder.pinned.active {
                    opacity: 0.4;
                    .l-toi-val {
                        pointer-events: none;
                        opacity: 0;
                    }
                }
            }
        }
    }

    .l-time-conductor-controls {
        align-items: center;
        margin-top: $interiorMargin;
        .l-time-conductor-zoom-w {
            @include justify-content(flex-end);
            .time-conductor-zoom {
                height: $r3H;
                min-width: 100px;
                width: 20%;
            }
            .time-conductor-zoom-current-range {
                color: $colorTick;
            }
        }
    }

    // Real-time, latest modes
    &.realtime-mode,
    &.lad-mode {
        .time-conductor-icon {
            &:before {
                color: $colorTimeCondKeyBg;
            }
            div[class*="hand"] {
                @include animation-name(clock-hands);
                &:before {
                    background: $colorTimeCondKeyBg;
                }
            }
        }

        .l-time-conductor-inputs-holder {
            .l-time-range-input-w {
                input[type="text"]:not(.error) {
                    background: transparent;
                    box-shadow: none;
                    border-radius: 0;
                    padding-left: 0;
                    padding-right: 0;
                    &:hover,
                    &:focus {
                        @include nice-input();
                        padding: $inputTextP;
                    }
                }
                .icon-calendar {
                    display: none;
                }
                &.start-date {
                    display: none;
                }
                &.end-date {
                    pointer-events: none;
                    input[type="text"] {
                        color: pullForward($colorTimeCondKeyBg, 5%);
                        margin-right: $interiorMargin;
                        tab-index: -1;
                    }
                }
            }
        }

        .l-data-visualization {
            background: $colorTimeCondDataVisRtBg !important;
        }

        .mode-selector .s-menu-button {
            $fg: $colorTimeCondKeyFg;
            @include btnSubtle($bg: $colorTimeCondKeyBg, $bgHov: pullForward($colorTimeCondKeyBg, $ltGamma), $fg: $colorTimeCondKeyFg);
            &:before {
                color: $fg !important;
            }
        ;
            color: $fg !important;
        }
    }

    // Fixed mode
    &.fixed-mode {
        $i: $glyph-icon-calendar;
        .time-conductor-icon div[class*="hand"] {
            &.hand-little {
                @include transform(rotate(120deg));
            }
        }
        .mode-selector .s-menu-button:before {
            content: $i;
        }
        .l-axis-holder {
            @include cursorGrab();
        }
    }

    // Realtime mode
    &.realtime-mode {
        $i: $glyph-icon-clock;
        .time-conductor-icon div[class*="hand"] {
            @include animation-name(clock-hands);
        }
        .time-delta:before {
            content: $i;
        }
        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
            content: 'Now';
        }
        .mode-selector .s-menu-button:before {
            content: $i;
        }
    }

    // LAD mode
    &.lad-mode {
        $i: $glyph-icon-database;
        .time-conductor-icon div[class*="hand"] {
            @include animation-name(clock-hands-sticky);
            &.hand-big {
                @include animation-duration(5s);
            }
            &.hand-little {
                @include animation-duration(60s);
            }
        }
        .time-delta:before {
            content: $i;
        }
        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
            content: 'LAD';
        }
        .mode-selector .s-menu-button:before {
            content: $i;
        }
    }
}

/******************************************************************** MOBILE */

@include phoneandtablet {
    .l-time-conductor-holder {
        min-width: 0 !important;
    }
    .super-menu.mini {
        width: 200px;
        height: 100px;
        .pane.menu-item-description {
            display: none;
        }
    }
}

@include phone {
    .l-time-conductor {
        min-width: 0;
        .l-time-conductor-inputs-and-ticks {
            .l-time-conductor-inputs-holder {
                .l-time-range-w {
                    background-image: none !important;
                }
            }
            mct-conductor-axis {
                display: none;
            }
        }
    }
}

@include phonePortrait {
    .l-time-conductor {
        .l-data-visualization,
        .l-time-conductor-zoom-w,
        .time-delta {
            display: none;
        }

        .l-time-conductor-inputs-and-ticks {
            height: auto !important;
            .l-time-conductor-inputs-holder {
                position: relative;
                height: auto !important;

                .l-time-range-w {
                    background-image: none !important;
                    display: block;
                    height: auto !important;
                    padding: 0 !important;
                    position: relative;
                    text-align: left;
                    &:not(:first-child) {
                        margin-top: $interiorMargin;
                    }
                }
            }
        }

        // Fixed mode
        &.fixed-mode {
            .l-time-conductor-inputs-and-ticks {
                .l-time-range-w {
                    .title {
                        width: 30px;
                    }
                }
            }
        }

        // Real-time, latest modes
        &.realtime-mode,
        &.lad-mode {
            .l-time-conductor-inputs-and-ticks {
                .l-time-range-w {
                    &.start-w {
                        display: none;
                    }
                    &.end-w {
                        margin-top: 0;
                        .end-date input[type="text"] {
                            margin: 0;
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
}
